<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Web Component Example 1: Basic Custom Element</title>
    <style>
        .controls {
            margin: 20px 0;
            padding: 15px;
            background-color: #f5f5f5;
            border-radius: 5px;
        }
        .controls button {
            margin: 0 10px;
            padding: 8px 16px;
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        .controls button:hover {
            background-color: #0056b3;
        }
        .controls button.remove-btn {
            background-color: #dc3545;
        }
        .controls button.remove-btn:hover {
            background-color: #c82333;
        }
        .element-container {
            border: 2px dashed #ccc;
            padding: 10px;
            margin: 10px 0;
            min-height: 50px;
        }
        .element-container:empty::after {
            content: "这里将显示动态添加的元素";
            color: #999;
            font-style: italic;
        }
    </style>
</head>
<body>
    <h1>简单的自定义元素</h1>

    <div class="controls">
        <button onclick="addElement()">添加元素</button>
        <button class="remove-btn" onclick="removeElement()">移除最后一个元素</button>
        <button class="remove-btn" onclick="clearAll()">清空所有元素</button>
        <hr style="margin: 10px 0;">
        <button onclick="testAttributeChange()">测试属性变化</button>
        <button onclick="testAdoptedCallback()">测试文档迁移</button>
    </div>

    <!-- 静态元素 -->
    <h3>静态元素（页面加载时就存在）：</h3>
    <my-simple-element data-index="静态1" data-order="1" custom-message="这是静态元素1"></my-simple-element>
    <my-simple-element data-index="静态2" data-order="2" custom-message="这是静态元素2"></my-simple-element>

    <!-- 动态元素容器 -->
    <h3>动态元素（通过按钮控制）：</h3>
    <div id="dynamic-container" class="element-container"></div>

    <script>
        // 1. 定义一个 JavaScript 类，继承 HTMLElement
        class MySimpleElement extends HTMLElement {
            constructor() {
                super(); // 总是先调用 super()
                console.log('MySimpleElement: 构造函数被调用！');
                // 初始化组件的内部状态，但不操作DOM
            }

            // 2. 当元素被添加到文档时调用
            connectedCallback() {
                console.log('MySimpleElement: 元素被添加到DOM！');
                
                // 读取传入的参数 - 多种方式
                const index = this.getAttribute('data-index');
                const order = this.dataset.order || this.getAttribute('data-order');
                const customMessage = this.customMessage || this.getAttribute('custom-message');
                
                // 读取复杂数据
                let config = {};
                try {
                    config = JSON.parse(this.dataset.config || '{}');
                } catch (e) {
                    console.warn('解析配置数据失败:', e);
                }
                
                // 设置元素的内部HTML内容，显示所有参数
                this.innerHTML = `
                    <div style="border: 1px solid #ddd; padding: 10px; margin: 5px 0; border-radius: 4px;">
                        <p><strong>自定义元素 #${order || index || '未知'}</strong></p>
                        <p>${customMessage || '默认消息'}</p>
                        <small>创建时间：${new Date(config.timestamp || Date.now()).toLocaleTimeString()}</small>
                        <br>
                        <small>随机值：${config.random ? config.random.toFixed(4) : 'N/A'}</small>
                        <br>
                        <small>属性变化次数：<span id="attr-count-${order || index || 'unknown'}">0</span></small>
                    </div>
                `;
                
                console.log(`元素参数详情:`, {
                    'data-index': index,
                    'data-order': order,
                    'custom-message': customMessage,
                    'config': config
                });
            }

            // 3. 当元素从文档中移除时调用
            disconnectedCallback() {
                console.log('MySimpleElement: 元素从DOM中移除！');
            }

            // 4. 当元素的属性发生变化时调用
            attributeChangedCallback(name, oldValue, newValue) {
                console.log(`MySimpleElement: 属性 "${name}" 从 "${oldValue}" 变为 "${newValue}"`);
                
                // 更新属性变化计数器
                const order = this.dataset.order || this.getAttribute('data-order') || 'unknown';
                const countSpan = this.querySelector(`#attr-count-${order}`);
                if (countSpan) {
                    const currentCount = parseInt(countSpan.textContent) || 0;
                    countSpan.textContent = currentCount + 1;
                }
                
                // 根据属性变化更新显示
                if (name === 'custom-message' || name === 'data-index') {
                    this.updateDisplay();
                }
            }

            // 5. 当元素被移动到新文档时调用（如iframe之间）
            adoptedCallback(oldDocument, newDocument) {
                console.log('MySimpleElement: 元素被移动到新文档！', {
                    oldDocument: oldDocument?.title || '未知',
                    newDocument: newDocument?.title || '未知'
                });
            }

            // 6. 定义需要监听的属性（必须静态定义）
            static get observedAttributes() {
                return ['data-index', 'custom-message', 'data-order'];
            }

            // 辅助方法：更新显示
            updateDisplay() {
                const index = this.getAttribute('data-index');
                const order = this.dataset.order || this.getAttribute('data-order');
                const customMessage = this.customMessage || this.getAttribute('custom-message');
                
                const messageElement = this.querySelector('p:nth-child(2)');
                if (messageElement) {
                    messageElement.textContent = customMessage || '默认消息';
                }
            }
        }

        // 4. 定义你的自定义元素，将其与上面的类关联起来
        customElements.define('my-simple-element', MySimpleElement);

        // 动态添加和移除元素的函数
        let elementCounter = 0;
        
        function addElement() {
            const container = document.getElementById('dynamic-container');
            const newElement = document.createElement('my-simple-element');
            
            // 方式1：通过自定义属性传参
            newElement.setAttribute('data-index', ++elementCounter);
            
            // 方式2：通过dataset传参（推荐）
            newElement.dataset.order = elementCounter;
            
            // 方式3：通过自定义属性传参
            newElement.customMessage = `这是第 ${elementCounter} 个元素`;
            
            // 方式4：通过data属性传复杂数据
            newElement.dataset.config = JSON.stringify({
                id: elementCounter,
                timestamp: Date.now(),
                random: Math.random()
            });
            
            container.appendChild(newElement);
            console.log(`添加了第 ${elementCounter} 个元素`);
        }

        function removeElement() {
            const container = document.getElementById('dynamic-container');
            const lastElement = container.lastElementChild;
            if (lastElement) {
                container.removeChild(lastElement);
                console.log('移除了最后一个元素');
            } else {
                console.log('没有元素可以移除');
            }
        }

        function clearAll() {
            const container = document.getElementById('dynamic-container');
            container.innerHTML = '';
            elementCounter = 0; // 重置计数器
            console.log('清空了所有动态元素');
        }

        function testAttributeChange() {
            const staticElement = document.querySelector('my-simple-element[data-index="静态1"]');
            if (staticElement) {
                const newMessage = `更新消息 - ${new Date().toLocaleTimeString()}`;
                staticElement.setAttribute('custom-message', newMessage);
                console.log('测试：静态元素1的custom-message属性已更新');
            } else {
                console.warn('静态元素1未找到，无法测试属性变化');
            }
        }

        function testAdoptedCallback() {
            const staticElement = document.querySelector('my-simple-element[data-index="静态2"]');
            if (staticElement) {
                // 创建iframe来测试adoptedCallback
                const iframe = document.createElement('iframe');
                iframe.style.width = '300px';
                iframe.style.height = '100px';
                iframe.style.border = '1px solid #ccc';
                iframe.src = 'about:blank';
                
                document.body.appendChild(iframe);
                
                iframe.onload = function() {
                    // 将元素移动到iframe
                    iframe.contentDocument.body.appendChild(staticElement);
                    console.log('测试：静态元素2已移动到iframe，adoptedCallback应该被触发');
                };
            } else {
                console.warn('静态元素2未找到，无法测试文档迁移');
            }
        }
    </script>
</body>
</html>
